<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" data-dpr="1" style="font-size: 37.5px;">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="icon" href="/favicon.ico">
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/js/sweetalert.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/stroage.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/comm.js" type="text/javascript" charset="UTF-8"></script>
    <!--<link rel="stylesheet" href="https://oilimages.oss-cn-shenzhen.aliyuncs.com/rechargeCss/index.css" type="text/css" />-->
    <link rel="stylesheet" href="/css/my.css" type="text/css" />
    <style type="text/css">
        .Contain{ padding:10px;  }
        a,img,h5{ cursor: pointer; }
        .Contain h5{ margin: 0 auto; margin-bottom:10px; }
        .Contain .LayOut{ width:100%;  box-sizing:border-box; border-top:1px solid #e1e1e1; padding-top:5px;  display:flex; justify-content: center; align-items:flex-start;  }
        .Contain .LayOut .Left,.Contain .LayOut .Right{ display:flex; flex:0.5;  box-sizing:border-box; flex-direction:column; }
        .Contain .LayOut .Left{ flex:0.3; border-right:1px solid #e1e1e1;  }
        .Contain .LayOut .Right{ flex:0.7; justify-content:flex-start; padding-left:30px;   }
        .Contain .dataBox{ box-sizing:border-box; display:flex; justify-content:flex-start; align-items:flex-start; margin-bottom:20px;  }
        .Contain .dataBox .img img{ width:100px; height:100px; border:1px solid #e1e1e1; border-radius:8px; }
        .Contain .dataBox .paraList{ margin-left:10px; }
        .Contain .dataBox .paraList input{ width:60px; text-align:center; }
        .Contain .dataBox .paraList *{ font-size:16px; font-weight:bold; margin-top:5px; }
    </style>
    <title>数据展示</title>
    <script th:inline="javascript">
        window.onerror=function(){return true;};
        $(document).ready(function(){ //Document End


            //清除
            $(".clearBtn").click(async function(){
                if(confirm("是否清空数据")){
                    var addData={};
                    var res=await SyncJson("/api/delete",addData);
                    console.log("删除结果",res);
                    if(res.code===200){
                        alert("数据已清空");
                        window.location.href=window.location.href;
                    }
                }
            });

            //更新
            $(".update").blur(async function(){
                var dataid=$(this).attr("dataid");
                var price=$(this).val();
                var addData={
                    id:dataid,
                    sprice:price
                };
                var res=await SyncJson("/api/updateData",addData);
                console.log("更新结果",res);
                if(res.code===200){
                    $(".after"+dataid).text(price);
                }
            });

        });
    </script>
</head>
<body>
<div class="Contain">
    <h5 align="center">昌大昌-鹰景店</h5>
    <div class="LayOut">
        <div class="Left">
            <h5 class="clearBtn">修改前(点击清除)</h5>
            <div class="dataBox" th:each="item:${getProductsDatas}">
                <div class="img"><img th:src="${item.spic}"></div>
                <div class="paraList">
                    <div>物品: <span th:text="${item.sname}"></span></div>
                    <div>活动价: ￥<input class="update" th:dataid="${item.id}" type="text" th:value="${item.sprice}"></div>
                    <div>月售: <span th:text="${item.sellnumber}"></span></div>
                </div>
            </div>
        </div> <!-- Left End -->
        <div class="LayOut Right">
            <h5>修改后</h5>
            <div class="dataBox" th:each="item:${getProductsDatas}">
                <div class="img"><img th:src="${item.spic}"></div>
                <div class="paraList">
                    <div>物品: <span th:text="${item.sname}"></span></div>
                    <div>活动价: ￥<span th:class="'after'+${item.id}" th:text="${item.sprice}"></span></div>
                    <div>月售: <span th:text="${item.sellnumber}"></span></div>
                </div>
            </div>
        </div> <!-- Right End -->
    </div> <!-- LayOut End -->
</div>
</body>
</html>